<template>
    <span @click="() => { if (disabled) return; show = true }">{{ text || placeholder || '请选择' }}</span>
    <Popup :show="show" position="bottom" @click-overlay="show = false">
        <PickerGroup>
            <DatePicker v-model="date" :min-date="minDate" :max-date="maxDate" :title="placeholder"
                @confirm="onConfirm">
            </DatePicker>
            <TimePicker v-model="time" :min-date="minDate" :max-date="maxDate" :title="placeholder"
                @confirm="onConfirm">
            </TimePicker>
        </PickerGroup>
    </Popup>
</template>
<script setup lang="ts">
import { DatePicker, TimePicker, PickerGroup, Popup } from "vant";
import { ref } from "vue";
import type { dateType } from "@b/model/base/type";
import { Time } from "@b/model/base/time";

interface prop {
    value?: Date | string
    type: dateType
    minDate?: Date
    maxDate?: Date
    placeholder?: string
    disabled?: boolean
}
const { value, type, minDate, maxDate, placeholder, disabled } = defineProps<prop>()
const v = new Time(value)
const date = ref(v.getTime('YYYY-MM-DD'))
const time = ref(v.getTime('hh:mm:ss'))

const emits = defineEmits(['confirm'])
const show = ref(false)
const text = ref(date)
const onConfirm = () => {
    show.value = false
    emits('confirm', new Date(date.value.join('/') + ' ' + time.value.join(':')).getTime())
}
</script>
